<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<uni-status-bar bgColor="#ffffff"></uni-status-bar>
		<!-- #endif -->
		<!-- 骨架屏应用 -->
		<indexSkeleton v-if="loading"></indexSkeleton>
		<view v-else class="animate__animated animate__fadeIn animate__fast">
			<block v-for="(item,index) in templates" :key="index">
				<!-- 搜索模块 -->
				<f-search-bar v-if="item.type == 'search'" :placeholder="item.placeholder"></f-search-bar>
				<!-- 轮播图模块 -->
				<view v-else-if="item.type == 'swiper'">
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
						class="flex justify-center mt-2">
						<swiper-item class="flex justify-center shadow" v-for="(item,index2) in item.data" :key="index2"
							@click="swiperClick(item)">
							<image :src="item.src" mode="aspectFill" style="width: 720rpx;height: 300rpx;"
								class="rounded">
							</image>
						</swiper-item>
					</swiper>
				</view>
				<!-- icon图标模块 -->
				<icon-nav v-else-if="item.type === 'icons'" :list='item.data'></icon-nav>
				<!-- 优惠券模块 -->
				<coupon-list v-else-if="item.type === 'coupon'" ref="couponList"></coupon-list>
				<!-- 拼团&秒杀 模块 -->
				<view v-else-if="item.type === 'promotion'">
					<active-list :type="item.listType"></active-list>
				</view>
				<!-- 最新列表模块 -->
				<view v-else-if="item.type === 'list'">
					<view class="blank-line" />
					<view class="p-2 flex justify-between align-center">
						<text class="font-md font-weight-bold">最新列表</text>
						<text class="font-sm text-secondary" @click="goCourseList">查看全部</text>
					</view>
					<view>
						<course-list v-for="(item2,index2) in item.data" :key="index2" :item="item2"
							:type="item.listType">
						</course-list>
					</view>
				</view>
				<!-- 底部模块 -->
				<view v-else-if="item.type === 'imageAd'">
					<view class="blank-line" />
					<image :src="item.data" mode="aspectFill" style="height: 375rpx;width: 100%;"
						@click="imgItemClick(item)"></image>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import indexSkeleton from "./index-skeleton.vue"
	export default {
		data() {
			return {
				// 模板数据 
				templates: [],
				// 骨架屏状态
				loading: false
			}
		},
		components: {
			indexSkeleton
		},
		created() {
			this.loading = true
			this.getData()
			uni.$on('userLogin', this.getCouponList)
			uni.$on('userLoginOut', this.getCouponList)
		},
		destroyed() {
			uni.$off('userLogin',this.getCouponList)
			uni.$off('userLoginOut',this.getCouponList)
		},
		// 监听下拉刷新
		onPullDownRefresh() {
			this.getData()
			this.getCouponList()
		},
		methods: {
			getData() {
				this.$api.getIndexData().then(data=>{
					this.templates = data
				}).finally(()=>{
					this.loading = false
					uni.stopPullDownRefresh()
				})
			},
			getCouponList() {
				console.log(this.$refs.couponList, 'this.$refs.couponList');
				this.$refs.couponList[0].getData()
			},
			goCourseList() {
				this.$navigateTo('/pages/list/list?module=course')
			},
			swiperClick(item) {
				if (item.type == 'webview') {
					this.$openWebview(item.url)
				} else if (item.type == 'course') {
					uni.navigateTo({
						url: '/pages-media/course/course?id=' + item.course_id,
					});
				}
			},
			imgItemClick(item) {
				console.log(item);
				if (!item.data) return
				// this.$openWebview(item.data)
			}
		}
	}
</script>

<style>

</style>
